<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>药膳预制菜</title>
    <style>
        /* 网页占据浏览器的全部高度 */
        html,body {
            height: 100%;
        }
        
        /* 重置body内外边距,将内容按列布局 */
        body {
            /* 设置布局 */
            display: flex;
            flex-direction: column;
            margin: 0;
            padding-right: 100px;
        }

        /* 设置导航栏样式 */
        .top {
            /* 设置布局方式 */
            display: flex;
            justify-content: center;

            /* 盒子大小、颜色 */
            width: 100%;
            height: 40px;
            color:  #C4C4C4;
            font-size: 12px;
            background-color: #333333;
        }

        /* 左上角布局 */
        .top p {
            margin-right: 20%;
            font-size:15px
        }

        /* 设置列表的布局方式 */
        ul {
            display: flex;
        }

        /* 取消原点、添加边框 */
        ul li {
            list-style-type: none;
            border-right: 1px solid #C4C4C4;
        }

        /* 取消最后一个元素的边框 */
        ul li:last-child {
            border-right: none;
        }

        /* 设置a元素样式 */
        ul a {
            color: #c4c4c4;
            text-decoration: none;
            padding: 0 20px;
        }

        .footer {
            width: 100%;
            height: 40px;
            background-color: #333333;
            color: #C4C4C4;
            font-size: 15px;
            text-align: center;
            line-height: 40px;
            /* margin-top: 20px; */
        }

        .shop {
            /* 弹性占据页面的所有空间 */
            flex: auto;
            /* 设置区域的宽度、并居中显示 */
            width: 930px;
            margin: auto;
        }

        /* 头部样式 */
        .header {
            /* 设置布局 */
            display: flex;
            justify-content: space-between;
            width: 100%;
            margin-top: 25px;
            background-color: white;
            border-radius: 0 0 8px 8px;
            position: sticky;
            top: 0px;
        }

        /* 设置表单样式 */
        .search form {
            display: flex;
            border: 1px solid rgb(4, 153, 19);
            border-radius: 26px;
            width: 400px;
            height: 26px;
        }

        /* 取消input的默认边框 */
        .header input {
            border: none;
            border-radius: 26px;
            font-size: 12px;
        }

        /* 设置输入框样式 */
        .header input[type="text"] {
            width: 80%;
            margin: 0 10px;
        }

        /* 设置按钮样式 */
        .header input[type="submit"] {
            /* 设置大小与颜色 */
            background-color: rgb(4, 153, 19);
            color: #FFFFFF;
            width: 20%;
        }

        /* 整体样式 */
        .banner {
            width: 100%;
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }

        /* 横幅广告大小 */
        .ad {
            width: 80%;
            height: 311px;
        }

        /* 菜单样式 */
        .menu {
            width: 20%;
            height: 311px;
            background-color: rgb(195, 169, 3);
        }

        .menu p, .menu a {
            text-decoration: none;
            color: #FFFFFF;
            text-align: center;
            font-size: 12px;
            padding: 4px 0;
        }

        .menu a:hover {
            color: yellow;
            cursor: pointer;
        }

        /* 图片样式 */
        .goods {
            width: 100%;
            margin-top: 20px;
        }

        .goods_title {
            font-size: 25px;
            color: #333333;
        }

        .container {
            width: 100%;
            display: flex;
            justify-content: space-between;
        }

        .item img {
            padding: 10px 0;
            width:250px;
            height:200px;
            margin-right:2px
        }

        .item {
            font-size: 13px;
            text-align: center;
            background-color: #FFFFFF;
            transition: all 0.3s;            
        }

        .item:hover {
            border-radius: 12px;
            cursor: pointer;
            box-shadow: 0 19px 39px 0 #999999;
            transform: translate(0, -4px);
        }

        .price span {
            font-size: 12px;
            color: #787878;
            /*字体中间横线*/
            text-decoration: line-through;
            padding: 0 10px;
        }

        .name {
            color: #333333;
            font-size:20px
        }

        .info {
            color: #787878;
        }

        .price {
            color: #fbfbfb;
          
            font-weight: 500;
        }
     
    </style>
</head>

<body>
    <!--导航栏-->
    <div class="top">
        <p>便捷养生方法——药膳预制菜</p>
        <ul>
            <li><a href="#">登录</a></li>
            <li><a href="#">注册</a></li>
            <li><a href="#">我的订单</a></li>
            <li><a href="#">个人中心</a></li>
            <li><a href="#">帮助中心</a></li>
            <li><a href="#">项目成员</a></li>
        </ul>
    </div>

    <!-- 内容 -->

    <div class="shop">
        <!--搜索栏-->
        <div class="header">
            <!-- 主题 -->
            <div class="logo">
                <img src="./img/right.png" width="50px" height="50px">
            </div>
            <!-- 搜索栏 -->
            <div class="search">
                <form action="#">
                    <input type="text" placeholder="请输入搜索内容">
                    <input type="submit" value="搜一搜">
                </form>
            </div>
        </div>

        <!-- 分类与横幅广告  -->
        <div class="banner">
            <!-- 分类菜单 -->
            <div class="menu">
                <p><a href="#">项目概述</a>  
                <p><a href="#">产品创新开发思路</a> 
                <p><a href="#">产品研制案例——槐米玫瑰花固体饮品</a>   
                <p><a href="#">市场前景分析</a> 
                <p><a href="#">商业模式</a> 
                <p><a href="#">风险对策</a> 
                <p><a href="#">组织管理</a> 
                <p><a href="#">附录 : 产品车间工艺设计说明书</a> 
                 
            </div>
            <!-- 广告 -->
            <div class="ad">
                <img src="./img/right.png" height="311px">
            </div>
        </div>

        <!-- 饮食推荐 -->
        <div class="goods">
            <p class="goods_title">季节饮食推荐</p>
            <div class="container">
                <div class="item">
                    <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.aH2brOpTcL7LBIp2B-ijyAHaHo?w=185&h=190&c=7&r=0&o=5&dpr=1.3&pid=1.7">
                    <p class="name">薏米红豆汤</p>
                    <p class="info">清热排毒 美容养颜</p>
                    <p class="price">春</p>
                </div>
                <div class="item">
                    <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C._QrRj7k2Ye1LjnrEIBDt2gHaF6?w=270&h=216&c=7&r=0&o=5&dpr=1.3&pid=1.7">
                    <p class="name">莲子百合汤</p>
                    <p class="info">滋阴润燥 补气养颜</p>
                    <p class="price">夏</p>
                </div>
                <div class="item">
                    <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.Y02ozNFfUMjbHakAiNPn0QHaHO?w=157&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7">
                    <p class="name">苹果炖雪梨</p>
                    <p class="info">清热润肺 滋润咽喉</p>
                    <p class="price">秋</p>
                </div>
                <div class="item">
                    <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.wC0TCt2zz5QJeBtmMrX_4QHaE8?w=261&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7">
                    <p class="name">红枣山药粥</p>
                    <p class="info">调理肠胃 滋补养生</p>
                    <p class="price">冬</p>
                </div>
                
            </div>
        </div>
        <!-- 性别年龄 -->
        <div class="goods">
            <p class="goods_title">特供推荐</p>
            <div class="container">
                <div class="item">
                    <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.WjnzgJCzQBSrhL307HBidAHaHj?w=187&h=191&c=7&r=0&o=5&dpr=1.3&pid=1.7">
                    <p class="name">银耳莲子羹</p>
                    <p class="info">益肾健脾 补虚固精</p>
                    <p class="price">青少年</p>
                </div>
                <div class="item">
                    <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.-xQQvgo9bv7A2FfqOraGowHaHa?w=159&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7">
                    <p class="name">枸杞菊花茶</p>
                    <p class="info">滋养肝肾 明目利湿</p>
                    <p class="price">青壮年</p>
                </div>
                <div class="item">
                    <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.8ZWk6fM9uD3pqjMjMkH_WQHaE6?w=241&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7">
                    <p class="name">当归母鸡汤</p>
                    <p class="info">调理血气 滋补身体</p>
                    <p class="price">中老年</p>
                </div>
                <div class="item">
                    <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.aMNLTSQl-OrXrSBXFQyuggHaGS?w=227&h=192&c=7&r=0&o=5&dpr=1.3&pid=1.7">
                    <p class="name">红枣糯米粥</p>
                    <p class="info">调和脾胃 养血安神</p>
                    <p class="price">男性特供</p>
                </div>
                <div class="item">
                    <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.lXY6qXRCwdsRZdg_p-G1CAHaHa?w=186&h=186&c=7&r=0&o=5&dpr=1.3&pid=1.7">
                    <p class="name">阿胶燕窝粥</p>
                    <p class="info">调精止痛 润肺养胃</p>
                    <p class="price">女性特供</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <div class="footer">新时代便捷养生方法——药膳预制菜</div>
</body>

</html>